<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>媒体查询</title>
</head>
<style>
	div{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
	/*其实高度也可以用媒体查询*/
	/*小于500px*/
	@media screen and (max-width: 500px) {
	    div {
	        background-color:lightblue;
	    }
	}
	/*大于500px，小于900px*/
	@media screen and (min-width:500px) and (max-width:900px){
	  div {
	  	background-color:green;
	  }
	}
	/*大于900px*/
	@media screen and (min-width: 900px) {
	    div {
	        background-color:red;
	    }
	}
</style>
<body>
	<div>11</div>
</body>
</html>